import React, { Component } from 'react'

export default class Homepage extends Component {
  constructor() {
    super()
    this.state = {
      imgIndex: 0,
    }
  }
  render() {
    const { imgIndex } = this.state
    return (
      <div className={`rt-homepage-container`}>
        <h2>Image Web</h2>

        <div className={`rt-img-box`}>
          <img className={`rt-img`} alt="demo" src={require('static/images/otter' + imgIndex + '.jpg')}></img>
          <div>img-name</div>
        </div>

        <div className={`rt-scroll-x-container`}>
          {
            Array(5).fill(1).map((v, i) => (
              <img key={Math.random()} alt="thumbnail" src={require('static/images/otter' + i + '.jpg')} onClick={() => {
                  if (imgIndex === i) return
                  this.setState({imgIndex: i})
                }} />
            ))
          }
          {
            Array(5).fill(1).map((v, i) => (
              <img key={Math.random()} alt="thumbnail" src={require('static/images/otter' + i + '.jpg')} onClick={() => {
                  if (imgIndex === i) return
                  this.setState({imgIndex: i})
                }} />
            ))
          }
        </div>
      </div>
    )
  }
}